<script setup>
import {inject, onMounted, ref} from "vue";
import {doDelete, doGet} from "@/util/request.js";
import {useRouter} from "vue-router";
import {showMessage} from "@/util/message.js";
import {ElMessageBox} from "element-plus";

const refresh=inject('refresh')

//创建市场活动对象
const activityList = ref([])
//查询市场活动列表
//定义路由对象
const router = useRouter()
//分页对象
const pageInfo = ref({})
//查询条件对象
const conForm = ref({})
//分页查询
const loadData = (current) => {
  let startTime = ''
  let endTime = ''
  for (let key in conForm.value.activityTime) {
    if (key === '0') {
      startTime = conForm.value.activityTime[key]
    } else if (key === '1') {
      endTime = conForm.value.activityTime[key]
    }
  }
  //准备参数
  let params = {
    current: current,
    pageSize: 15,
    ownerId: conForm.value.ownerId,
    name: conForm.value.name,
    startTime: startTime,
    endTime: endTime,
    cost: conForm.value.cost,
    createTime: conForm.value.createTime
  }
  // 分页查询
  doGet('/api/activity/pageList', params).then(resp => {
    // 判断是否查询成功
    if (resp.data.code === 200) {
      // 赋值
      activityList.value = resp.data.data.list
      pageInfo.value.total = resp.data.data.total
      pageInfo.value.pageSize = resp.data.data.pageSize
    } else {
      // 提示
      showMessage('查询活动列表失败', resp.data.msg, 'error')
    }
  })
}
// 搜索
const search = () => {
  loadData(1)
}
/*--------------跳转---------------*/
//添加市场活动
const addActivity = () => {
  router.push('/index/activity/addActivity')
}
//删除市场活动

//活动详情
const detail = (id) => {
  router.push('/index/activity/detail/' + id)
}
//编辑市场活动
const edit = (id) => {
  router.push('/index/activity/editActivity/' + id)
}
/*--------------跳转---------------*/
/*//创建条件查询参数对象

/*------------------------------------------*/
//查询负责人
const options = ref([])
const loadOptions = () => {
  doGet('/api/activity/ownerList', {}).then(resp => {
    if (resp.data.code === 200) {
      options.value = resp.data.data
    } /*else {
      showMessage('查询负责人失败', resp.data.msg, 'error')
    }*/
  })
}
/*------------------批量删除---------------------*/
// 获取选中的数据
let ids = []
const handlerSelectChange = (val) => {
  ids = []
  val.forEach(item => {
    ids.push(item.id)
  })
}
const delBatch = () => {
  // 判断是否选中
  if (ids.length <= 0) {
    showMessage('请选择要删除的数据',  'warning')
    return
  }
  // 确认删除
  ElMessageBox.confirm('确认删除该用户吗？').then(() => {
    // 删除
    doDelete('/api/activity/batchDelete/'+ ids,{}).then(resp => {
      // 判断是否删除成功
      if (resp.data.code === 200) {
        // 提示
        showMessage('删除活动成功', 'success')
        setTimeout(() => {
          //返回上一页
          // router.go(0)
          refresh()
        }, 600)
      } else {
        // 提示
      }
    }).catch({})
  })
}
/*----------------------删除活动---------------------------*/
const del = (id) => {
  // 确认删除
  ElMessageBox.confirm('确认删除该活动吗？').then(() => {
    // 删除
    doDelete('/api/activity/batchDelete/'+ id,{}).then(resp => {
      // 判断是否删除成功
      if (resp.data.code === 200) {
        // 提示
        showMessage('删除活动成功', 'success')
        setTimeout(() => {
          //刷新页面
          refresh()
        })
      }
    })
  })
}

//重置查询条件
const reset = () => {
  conForm.value.ownerId = ''
  conForm.value.name = ''
  conForm.value.activityTime = ''
  conForm.value.cost = ''
  conForm.value.createTime = ''
}

onMounted(() => {
  //查询用户列表
  loadData(1)
  // 查询负责人
  loadOptions()
})
</script>

<template>
  <el-form :model="conForm">
    <div>
      <el-button size="small" type="primary" @click="addActivity">活动录入</el-button>
      <el-button size="small" type="danger" @click="delBatch">批量删除</el-button>
      &nbsp;&nbsp;
      <span>负责人&nbsp;&nbsp;</span>
      <el-select size="small" style="width: 150px; margin-right: 20px" v-model="conForm.ownerId"
                 placeholder="请选择负责人">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>

      <span>活动名称&nbsp;&nbsp;</span>
      <el-input v-model="conForm.name" placeholder="请输入活动名称" size="small"
                style="width: 150px;margin-right: 20px"/>

      <span>活动时间&nbsp;&nbsp;</span>
      <el-date-picker
          size="small"
          style="width: 200px"
          v-model="conForm.activityTime"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD hh:mm:ss"/>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <span>活动预算&nbsp;&nbsp;</span>
      <el-input v-model="conForm.cost" placeholder="请输入活动预算" size="small"
                style="width: 150px;margin-right: 20px"/>

      <span>创建时间&nbsp;&nbsp;</span>
      <el-date-picker
          v-model="conForm.createTime"
          type="datetime"
          size="small"
          placeholder="请选择创建时间"
          value-format="YYYY-MM-DD HH:mm:ss"/>
      &nbsp;&nbsp;
      <el-button size="small" type="primary" @click="search">查询</el-button>
      <el-button size="small" type="info" @click="reset">重置</el-button>
    </div>

  </el-form>


  <el-table
      :data="activityList"
      :border="true"
      @selection-change="handlerSelectChange"
      style="width: 100%">
    <el-table-column type="selection" width="60" align="center"/>
    <el-table-column label="序号" type="index" width="60" align="center"/>
    <el-table-column label="负责人" property="ownerName" align="center"/>
    <el-table-column label="活动名称" property="name" align="center"/>
    <el-table-column label="开始时间" property="startTime" align="center"/>
    <el-table-column label="结束时间" property="endTime" align="center"/>
    <el-table-column label="活动预算" property="cost" width="120" align="center"/>
    <el-table-column label="创建时间" property="createTime" align="center"/>
    <el-table-column label="编辑时间" property="editTime" align="center"/>
    <el-table-column label="操作" align="center">
      <!--编辑&详情&删除按钮-->
      <template #default="scope">
        <el-button type="success" size="small" @click="detail(scope.row.id)">详情</el-button>
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <el-pagination
      layout="prev, pager, next, jumper"
      :background="true"
      :total="pageInfo.total"
      :page-size="pageInfo.pageSize"
      @change="loadData"/>

</template>

<style scoped>
.el-table {
  margin-top: 10px;
  margin-bottom: 10px;
}

</style>